<template>
	<view class="login">
		<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
		<view class="content">
			<!-- 头部logo -->
			<image :src="logoImage" class="logo"></image>
			<view class="title">在好的时间遇见最美的你</view>
			<!-- 主体表单 -->
			<view class="main">
				<view class="input-box">
					<view class="area">+86</view>
					<view class="input">
						<u-input v-model="username" border="none" placeholder="请输入手机号" :customStyle="{height:'88rpx',padding:'0 20rpx'}" fontSize="28rpx" @input="checkInputs"></u-input>
					</view>
				</view>
				<view class="input-box">
					<view class="input">
						<u-input v-model="code" type="code" border="none" placeholder="请输入验证码" :customStyle="{height:'88rpx',padding:'0 20rpx'}" fontSize="28rpx" @input="checkInputs"></u-input>
					</view>
					<view class="code-box">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<view @click="getVerificationCode" class="code-button">{{codeTips}}</view>
					</view>
				</view>
				<view :class="isActive?'wechat-button active':'wechat-button'" @click="userLogin">授权登录</view>
				<!-- <view class="cancel-button" >取消登录</view> -->
				<view class="agreementBox">
					<image src="../../static/common/icon_xuan.png" v-if="!isAagree" @click="isAagree=!isAagree" class="select">
					</image>
					<image src="../../static/common/icon_xuan1.png" v-if="isAagree" @click="isAagree=!isAagree" class="select">
					</image>
					<view class="text">我已阅读并同意遇见 <span style="color: #F169F6;" @click="$Tips('/pages/richText/richText?biaoshi=user_agreement')">《用户协议》</span> 和 <span style="color: #F169F6;" @click="$Tips('/pages/richText/richText?biaoshi=privacy_policy')">《隐私政策》</span> 以及 <span style="color: #F169F6;" @click="$Tips('/pages/richText/richText?biaoshi=service_term')">《中国移动认证服务条款》</span>
					</view>
				</view>
				<view class="tourist-mode-box" v-if="!parent_user_id">
					<view class="tourist-mode" @click="touristMode">
						<image src="../../static/common/youke.png" class="icon"></image>
						<view>游客模式</view>
					</view>
				</view>
			</view>
		</view>
		<agreement :show="agreementShow" @close="agreementShow=false" @login="isAagree=true;userLogin()"></agreement>
	</view>
</template>
<script>
	import agreement from '@/components/agreement.vue';
	export default {
		components:{
			agreement
		},
		data() {
			return {
				pageBg: '/static/login/loginBg.png',
				logoImage: '/static/logo.png', //logo图片
				username: '', //用户/电话
				code: '', //密码
				codeTips: '发送验证码',
				isAagree: false,
				isActive: false,
				parent_user_id: '', //上级用户id
				agreementShow:false
			};
		},
		mounted() {
			this.parent_user_id = uni.getStorageSync('parent_user_id');
		},
		methods: {
			touristMode() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			checkInputs() {
				this.isActive = this.username && this.code;
			},
			//验证码时间改变
			codeChange(text) {
				this.codeTips = text;
			},
			//获取验证码
			getVerificationCode() {
				let that = this
				if (!this.username) {
					return this.$Toast('请输入手机号');
				}
				//正则验证
				if (!/^1[3-9]\d{9}$/.test(this.username)) {
					return this.$Toast('请输入正确的手机号')
				}
				this.$Api.common.getVerificationCode({
					mobile: this.username,
					event: 'mobilelogin'
				}).then(res => {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							this.$refs.uCode.start();
						}, 2000);
					} else {
						this.$Toast('倒计时结束后再发送');
					}
				})
			},
			//当前登录按钮操作
			userLogin() {
				// 跳转到自定义相机页面
				// uni.navigateTo({
				// 	url: '/pages/authentication/camera',
				// 	success: () => {
				// 		console.log('跳转成功');
				// 	},
				// 	fail: (err) => {
				// 		console.error('跳转失败:', err);
				// 		this.$Toast('跳转失败，请重试');
				// 	}
				// });
				let that = this
				if (!that.isAagree) {
					this.agreementShow=true
					return
				}else{
					that.agreementShow=false
				}
				if (!that.username) {
					return that.$Toast('请输入手机号');
				}
				//正则验证
				if (!/^1[3-9]\d{9}$/.test(that.username)) {
					return this.$Toast('请输入正确的手机号')
				}
				if (!that.code) {
					return that.$Toast('请输入验证码');
				}
				uni.showLoading({
					title: '正在登录...'
				})
				that.$Api['user'].userLogin({
					mobile: that.username,
					code: that.code
				}).then(res => {
					uni.hideLoading()
					that.$store.commit('LOGIN', {
						token: res.data.userinfo.token
					});
					that.$store.commit('UPDATE_USERINFO', res.data.userinfo);
					console.log('test', res.data.userinfo);
					if (res.data.userinfo.gender == 0) {
						return this.$Tips('/pages/mine/select-sex')
					}
					if (res.data.userinfo.gender != 0 && !res.data.userinfo.city) {
						return this.$Tips('/pages/mine/improve-user')
					}
					let browser_type;
					uni.getSystemInfo({
						success: function(res) {
							console.log(res, 'browser_type');
							browser_type = res.version;
						}
					});
					that.$Tips({
						title: '登录成功！',
					}, {
						tab: 4,
						url: '/pages/index/index'
					})
					return
					// 匹配en中是否含有MicroMessenger字符串
					if (browser_type != '') {
						that.$Tips({
							title: '登录成功！',
						}, {
							tab: 4,
							url: '/pages/index/index'
						})
					} else {
						uni.showModal({
							content: '请下载app进行使用',
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								uni.reLaunch({
									url: '/pages/download/download'
								});
								// if (res.confirm) {
								// 	let browser = window.navigator.userAgent.toLowerCase()
								// 	// 匹配en中是否含有MicroMessenger字符串
								// 	if (browser.match(/MicroMessenger/i) != 'micromessenger') {
								// 	    uni.reLaunch({
								// 	    	url: '/pages/download/download'
								// 	    });
								// 	}else{
								// 		uni.reLaunch({
								// 		    url: '/pages/download/download'
								// 		});
								// 	}
								// } else if (res.cancel) {
								// 	let browser = window.navigator.userAgent.toLowerCase()
								// 	// 匹配en中是否含有MicroMessenger字符串
								// 	if (browser.match(/MicroMessenger/i) != 'micromessenger') {
								// 		uni.reLaunch({
								// 			url: '/pages/download/download'
								// 		});
								// 	}else{
								// 		uni.reLaunch({
								// 			url: '/pages/download/download'
								// 		});
								// 	}
								// }
							}
						});
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.login {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffffff;
	}

	.pageBg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 100;
		/* margin-top: 128rpx; */
	}

	.title {
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		margin: 10rpx auto 0;
	}

	/* 头部 logo */
	.logo {
		width: 176rpx;
		height: 176rpx;
		margin: 240rpx auto 0;
	}

	/* 主体 */
	.main {
		padding: 0 60rpx;
		margin-top: 94rpx;

		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.area {
				width: 140rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 16rpx;
				margin-right: 26rpx;
				font-size: $uni-font-size-base;
			}

			.code-box {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				.code-button {
					width: 220rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #ffffff;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					border-radius: 16rpx;
					font-size: $uni-font-size-base;
				}
			}

			.input {
				height: 88rpx;
				line-height: 88rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				flex: 1;
			}
		}

		.wechat-button {
			margin: 160rpx auto 0;
			width: 620rpx;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(138deg, #FFD0D9 0%, #C6A0F8 100%);
			border-radius: 16rpx;
		}

		.active {
			background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		}

		.cancel-button {
			margin: 40rpx auto 0;
			width: 620rpx;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			color: #F169F6;
			border-radius: 44rpx;
			border: 2rpx solid #F169F6;
		}

		.agreementBox {
			display: flex;
			text-align: center;
			justify-content: center;
			width: 100%;
			margin: 30rpx auto 0;
			padding: 0 30rpx;
			line-height: 40rpx;
			box-sizing: border-box;

			.select {
				width: 32rpx;
				height: 32rpx;
				margin-right: 14rpx;
				margin-top: 10rpx;
			}

			.text {
				flex: 1;
				font-size: 26rpx;
				color: #888888;
				text-align: start;
			}
		}

		.tourist-mode-box {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			margin: 0 auto;

			.tourist-mode {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.55);

				.icon {
					width: 22rpx;
					height: 24rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>